<template>
	<div class="actives">
		<div class="fixed">
			<div class="title flex">
				<div></div>
				<div class="title_left">
					发起拼券
				</div>
				<div class="add flex">
					<img @click="creat_c_no" src="../assets/image/chaungjian.png" />
				</div>
			</div>

			<div class="top ">
				<div class="top_scroll flex">
					<div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)">{{item.titile}}</div>

				</div>

			</div>
		</div>
		<div class="lists" v-if="tableData.code!=0">

			<div class="list flex" v-for="(item,index) in tableData" :key="index">
				
				<div v-if="item.active_status!=6">
				<div v-if="item.active_status==5" class="mes flex" >
			
					<div class="left">
						<div style="color: #BEC2C5;">编号：{{item.active_id}}</div>
						<div style="color: #BEC2C5;">{{item.active_name}}</div>
						<div class="flex"  style="color: #BEC2C5;">
							<span>报名:{{item.num_bm}}</span>
							<span>参团:{{item.num_ct}}</span>
							<span>额数:{{item.active_store_num}}</span>
						</div>
					</div>
					<div  class="right flex" >
						<div style="color: #BEC2C5;border: #BEC2C5 1px solid;">已拒绝</div>
                         <div class="right_foot flex" @click="showtost(item.active_exit_desc)"> 
						<span>理由说明</span><img src="../assets/image/liyoushuomings.png" />

					</div>
					</div>

				</div>
				<div v-else class="mes flex">
					<div class="left">
						<div>编号：{{item.active_id}}</div>
						<div>{{item.active_name}}</div>
						<div class="flex">
							<span>报名:{{item.num_bm}}</span>
							<span>参团:{{item.num_ct}}</span>
							<span>额数:{{item.active_store_num}}</span>
						</div>
					</div>
					<div class="right flex">
						<div v-if="item.active_status==1">未审核</div>
						<div v-if="item.active_status==2">招募中</div>
						<div v-if="item.active_status==3">已通过</div>
						<div v-if="item.active_status==4">进行中</div>
					</div>

				</div>
				<div class="show flex" @click="showop(index)" v-if="show!=index&&item.active_status!=5">

					<img style="width: 0.56217rem;height: 0.56217rem;" src="../assets/image/xainshi.png" alt="" />
				</div>
				<div v-show="index == show" class="shows">
					
					<div v-if="item.active_status=='1'" class="operation flex">
						<div class="flex" @click="chexiao(item.active_id)">
						  <div class="operation_left flex">
							<img src="../assets/image/chexiao.png" />
							<div>撤销</div>
						</div>
						<img src="../assets/image/rc.png" />
					</div>
					<div class="flex " @click="creat_c(item.active_id)">
							<div class="operation_left flex">
							<img  src="../assets/image/binaji.png" />
							<div>编辑</div>
						</div>
						<img src="../assets/image/rc.png" />
						</div>
					</div>
					<div v-if="item.active_status=='2'" class="operation flex">
						
						<div class="flex " @click="skip_registration(item.active_id)">
							<div class="operation_left flex">
								
								<img style="width: 0.5rem;height: 0.326rem;"  src="../assets/image/chakan.png"/>
					  
								<div>查看报名</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>
						

					</div>
					
					<div v-if="item.active_status==3" class="operation flex">
						
						<div class="flex " @click="skip_registration(item.active_id)">
							<div class="operation_left flex">
								
								<img style="width: 0.5rem;height: 0.326rem;"  src="../assets/image/chakan.png"/>
					  
								<div >查看报名</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>
						

					</div>
					
					<div v-if="item.active_status==4" class="operation flex">
						<div class="flex " @click="wx_pay(item.active_id,item.active_coupons_id)">
							<div class="operation_left flex">
								
					   <img  src="../assets/image/weiduanyingxiao.png"/>
								<div>微端营销</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>

						<div class="flex " >
							<!--@click="skip_market_detail"-->
							<div class="operation_left flex">
								
					   <img  src="../assets/image/yingxiaoxiangqing.png"/>
								<div>营销详细</div>
							</div>
							<img src="../assets/image/rc.png" />
						</div>

						
					</div>
					<div class="show flex" @click="showop(index)" v-if="show==index">
					<img style="width: 0.56217rem;height: 0.56217rem;" src="../assets/image/shouqi.png" alt="" />
				</div>
				</div>
			</div>
			</div>
		</div>
		<div class="none flex" v-else>
			空空如也哦~
		</div>
		<!--是否撤销的弹窗-->
	<div class="mask">
		<div class="tip flex">
			<div class="tip_title flex">
				<div >
					
				</div>
				<div>
				是否要撤销拼券	
				</div>
				<img  @click="yincang" src="../assets/image/chahao.png"/>
				
			</div>
			<div class="tip_btn flex">
				<div class="queding" @click="changestatus">
					是
				</div>
					<div class="quxiao" @click="yincang">否</div>
				</div>

		</div>
	</div>
	<!--提示发券已撤销的弹窗-->
	<div class="mask_tip">
		<div class="tip flex">
			<div class="tip_title flex">
				<div >
					
				</div>
				<div>
				发券已撤销
				</div>
				<div></div>
				
			</div>
			<div class="tip_btn flex">
					<div  @click="yincang">我知道了</div>
				</div>

		</div>
	</div>
<!--查看拒绝理由的弹窗-->
<div class="mask_jujie">
		<div class="tip flex">
			<div class="tip_title flex">
				<div >
					
				</div>
				<div>
				理由说明	
				</div>
				<img  @click="yincang" src="../assets/image/chahao.png"/>
				
			</div>
			<div class="center">
				<div>
					{{liyou}}
				</div>
				
			</div>
			<div class="tip_btn flex">
					<div  @click="yincang">我知道了</div>
				</div>

		</div>
	</div>

	
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				show: -1,
				activeIndex: -1,
				stop:1,
				chexaio_id:"",
				liyou:"",
				nameoptions: [{
						titile: '全部'
					},
					{
						titile: '已申请'
					},
					{
						titile: '招募中'
					},
					{
						titile: '已通过'
					},
					{
						titile: '进行中'
					},
					{
						titile: '已拒绝'
					}
				],
				tableHeight: null,
				tableData:"",
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {

			checkItem(index) {
				this.isActive = index;
				
				if(index==0){
					this.list();
				}else{
					this.list(index);
				}
			},
			showop(index) {
				let that = this;
				if(that.show == index) {
					that.show = -1; //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开

					console.log()
				} else {
					that.show = index; //这里是把index赋值给isShow，isShow=index则显示
				}

			},
			//查看详情
			creat_c(id) {
				this.$router.push({
					path: '/begin',
					query:{
							id:id
						}
				});
			},
			creat_c_no(){
				this.$router.push({
					path: '/begin'
				});	
			},
			skip() {
			    this.$router.push({
						path: '/market_detail'
					});
			

			},
			
			wx_pay(active_id,active_coupons_id){
				 this.$router.push({
						path: '/wx_pay',
						query:{
							active_id:active_id,
							active_coupons_id:active_coupons_id
						}
					});
			},
			skip_market_detail(){
				this.$router.push({
						path: '/market_detail'
					});
			},
			skip_registration(id){
				this.$router.push({
						path: '/registration',
						query:{
							id:id
						}
					});
			},
			chexiao(chexaio_id){
				  $(".mask").css('display', 'block');
				this.chexaio_id=chexaio_id;
			},
			showtost(active_exit_desc){
				  $(".mask_jujie").css('display', 'block');
				  this.liyou=active_exit_desc
			},
			changestatus(){
					var that=this;
            var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/coupon/counpon_del", qs.stringify({
						"id": that.chexaio_id,
						"key":localStorage.getItem("key")
						
				})).then(response => {
					
					that.tableData=response.data.data
					that.list()
					
					})
					.catch(error => {

					});
    
				
				
				
				
				
					 $(".mask").css('display', 'none');
					  $(".mask_tip").css('display', 'block');
				},
			yincang(){
				 $(".mask").css('display', 'none');
				  $(".mask_tip").css('display', 'none');
				  $(".mask_jujie").css('display', 'none');
			},
			list(e){
           	var that=this;
      var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/coupon/counpon_list", qs.stringify({
						"id": localStorage.getItem("store_id"),
						"active_status":e,
						"key":localStorage.getItem("key")
						
				})).then(response => {
					
					that.tableData=response.data.data
					console.log(that.tableData)
					
					})
					.catch(error => {

					});
    
         }
	
		},
		 
		mounted() {

this.list()
		},
	}
</script>

<style>

</style>
<style scoped="scoped">
	.active {
		color: #007AFF;
	}
	
	.top {
		font-size: 0.60869rem;
		width: 100%;
		max-width: 640px;
		overflow-x: auto;
		overflow-y: hidden;
		background: white;
	}
	
	.top_scroll {
		min-width: 110%;
	}
	
	.top_scroll>div {
		width: 3rem;
		text-align: center;
	}
	
	.mes {
		margin: 0.5rem;
		font-size: 0.8rem;
		justify-content: space-between;
	}
	
	.title_left {
		font-size: 0.6956rem;
		font-weight: bold;
		color: #3e474e;
	}
	
	.lists {
		-webkit-overflow-scrolling : touch;
		position: fixed;
		bottom: 2rem;
		top: 4rem;
		background: #F5F6FA;
		width: 100%;
		padding: 1rem 0;
		overflow-y: scroll;
	}
	
	.list {
		/*border: 1px solid white;*/
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		background: url(../assets/image/beijing.png) no-repeat;
		background-size: 100%;
		border-radius: 10px;
		flex-direction: column;
	}
	
	.right {
		flex-direction: column;
	}
	
	.show {
		justify-content: center;
		align-items: center;
		height: 1rem;
	}
	
	.fixed {
		position: fixed;
		top: 0;
		background: white;
		width: 100%;
		max-width: 640px;
		z-index: 99;
	}
	
	.title {
		
		width: 90%;
		padding: 5%;
		background: white;
			
	}
	.title>div{
		width: calc(100%/3);
		text-align: center;
	}
	.add{
		justify-content: flex-end;
	}
	.add>img {
		width: 1rem;
		height: 1rem;
	}
	
	.mes>.left>div:nth-child(1) {
		color: #868E91;
		font-size: 0.47826rem;
	}
	
	.mes>.left>div:nth-child(2) {
		color: #3E474E1;
		font-size: 1.10869rem;
		font-weight: 400;
	}
	
	.mes>.left>div:nth-child(3) {
		color: #3E474E1;
		font-size: 0.4347rem;
		font-weight: 400;
	}
	
	.mes>.left>div:nth-child(3)>span {
		margin-right: 0.9rem;
	}
	
	.mes>.right>div:nth-child(1) {
		color: #007AFF;
		font-size: 0.56521rem;
		border: 1px solid #007AFF;
		padding: 0.1rem 0.5rem;
		border-radius: 0.5rem;
	}
	
	.status {
		color: #007AFF;
		font-size: 0.56521rem;
		border: 1px solid #007AFF;
		padding: 0.1rem 0.5rem;
		border-radius: 0.5rem;
	}
	
	.mes>.right>div:nth-child(2) {
		color: #007AFF;
		font-size: 1.10869rem;
		font-weight: 400;
	}
	
	.operation {
		
		justify-content: space-between;
		align-items: center;
		margin: auto;
		font-size: 0.60869rem;
		padding: 0.2rem 0;
		flex-direction: column;
	}
	.operation>div{
		width: 100%;
		height: 1.5rem;
		justify-content: space-between;
		align-items: center;
	}
	.operation_left {
		height: 100%;
		align-items: center;
	}
	
	.operation_left img {
		width: 0.3919rem;
		height: 0.3919rem;
		padding-right: 0.5rem;
	}
	
	.operation>div>img {
		width: 0.2919rem;
		height: 0.5819rem;
	}
	
	.shows {
		width: 95%;
		margin: auto;
	}
	.mask,.mask_jujie,.mask_tip{
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease-in;
		z-index: 99;
		display: none;
		
	}
	.mask_jujie .center div{
		width:80%;
		margin-left: 10%;
		margin-top: -0.5rem;
		text-align: center;
	   font-size: 0.565217rem;
	}
	
.mask_jujie .tip_btn,.mask_tip .tip_btn,.mask_chexiao_tip .tip_btn{
		width: 100%;
		height: 1.9043rem;
		justify-content: center;
		align-items: center;
		margin-top: 1rem;
		margin-bottom: 0.5rem
	
	}
	.mask_jujie .tip_btn>div,.mask_tip .tip_btn>div,.mask_chexiao_tip .tip_btn>div{
		width: 6.3913rem;
		height: 1.3043rem;
		background: #007AFF;
		border-radius: 0.47826rem;
		color: white;
		font-size: 0.60869rem;
		text-align: center;
		line-height: 1.3043rem;
	}
	.tip{
	   width: 13.78260rem;
	  margin: 50vh auto ;
    transform: translateY(-50%);
	  background: white;
	  border-radius: 0.5rem;
	  flex-direction: column;
	}
	.mask_jujie>.tip{
		
	}
	.tip_title{
		width:90%;
		padding: 5%;
		font-size: 0.7826rem;
		justify-content: space-between;
		line-height: 2rem;
	}
	
	.tip_title img{
		width:0.565212rem;
		height: 0.565212rem;
		
		
	}
	.center div{
		width:60%;
		margin-left: 20%;
		color: #3E474E;
	   font-size: 0.565217rem;
		
	}
	.tip_btn{
		font-size: 0.6087rem;
		justify-content: space-between;
		align-items: center;
		margin-top: 1rem;
		margin-bottom: 0.5rem
	}
	.queding,.quxiao{
		width: 4.9782rem;
		height: 1.3043rem;
		text-align: center;
		color: #868E91;
		line-height: 1.3043rem;
		
	}
	.quxiao{
		color: white;
		background: #007AFF;
		border-radius: 10px;
		margin-right: 1rem;
	}
	.queding{
		margin-left: 1rem;
	}
	
	.right_foot{
	
	align-items: center;
	margin-top: 1rem;	
	}
	
	.right_foot>img {
		width: 0.47826rem;
		height: 0.47826rem;
		padding-left: 0.2rem;
	}
	
	.right_foot>span {
		font-size: 0.565217rem;
	}
	.none{
		position: fixed;
		width: 100%;
		height: 100%;
		background: #F5F6FA;
		justify-content: center;
		align-items: center;
		font-size: 0.5217rem;
	}
</style>